<template>
  <div class="buttomnav bg-fff">
    <div class="bet buttom tac">
      <div v-for="(item, index) in list" :key="index" class="item">
        <div @click="jump(item.path, index)">
          <div class="rel">
<!--            <lottie :animationData="item.animationData"  :auto="activeTitle === item.title?true:false" :width="60" :height="60" />-->
            <img :src="item.imgOn" alt="" v-if="activeTitle === item.title && index!=2">
            <img :src="item.img" alt="" v-if="activeTitle != item.title && index!=2">
            <img v-if="index==2" class="mainIcon" :src="item.img" alt="">
          </div>
          <p v-if="item.title" :class="activeTitle === item.title ? 'color' : ''">
            {{ item.title }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


import * as homeicon from "../assets/lottie/home.json";
import * as tradeicon from "../assets/lottie/trade.json";
import * as walleticon from "../assets/lottie/wallet.json";
import * as mineicon from "../assets/lottie/mine.json";
import * as businessrecord from "../assets/lottie/wallet.json";
import Lottie from "./lottie.vue";
export default {
  name: "index",
  components:{
    Lottie
  },
  data() {
    return {
      animationSpeed: 1,
      list: [
        {
          title: this.$t("title.home"),
          animationData:homeicon,
          img:require('../assets/images/tabbar/home.png'),
          imgOn:require('../assets/images/tabbar/homeS.png'),
          path:'/home'
        },
        {
          title: this.$t("new.doc40"),
          animationData:homeicon,
          img:require('../assets/images/tabbar/situation.png'),
          imgOn:require('../assets/images/tabbar/situationS.png'),
          path:'/quotations'
        },
        {
          title: "",
          animationData:homeicon,
          img:require('../assets/images/tabbar/deal.png'),
          imgOn:require('../assets/images/tabbar/deal.png'),
          path:'/quotations'
        },
        {
          title: this.$t("new.desc"),
          animationData:tradeicon,
          img:require('../assets/images/tabbar/manage.png'),
          imgOn:require('../assets/images/tabbar/manageS.png'),
          path:'/business'
        },
        // {
        //   title: this.$t("title.zican"),
        //   animationData:walleticon,
        //   img:require('../assets/images/ico_zc.png'),
        //   imgOn:require('../assets/images/ico_zc_on.png'),
        //   path:'/user/wallet'
        // },
        // {
        //   title: this.$t("title.zican"),
        //   animationData:businessrecord,
        //   path:'/businessrecord'
        // },
        // {
        //     title: this.$t("new.doc15"),
        //     animationData:mineicon,
        //     img:require('../assets/images/ico_sz.png'),
        //     imgOn:require('../assets/images/ico_sz_on.png'),
        //     path:'/businessrecord'
        // },
        {
            title: this.$t("new.desc1"),
            animationData:mineicon,
            img:require('../assets/images/tabbar/mine.png'),
            imgOn:require('../assets/images/tabbar/mineS.png'),
            path:'/user'
        }
      ],
      stupid: "",
      is_agency: ""
    };
  },

  props: ["activeTitle"],
  methods: {
    async jump(path, index) {
      if (index != 2) {
        this.$router.push(path);
        return
      }
      let id = localStorage.getItem("bussinessInfo_title")
      let code = localStorage.getItem("bussinessInfo_code")
      let coinid = localStorage.getItem("bussinessInfo_coinid")
      let sellCoinId = localStorage.getItem("bussinessInfo_sellCoinId")

      if (id && code && coinid && sellCoinId) {
        this.$router.push(`/business/info?id=${id}&code=${code}&coinid=${coinid}&sellCoinId=${sellCoinId}`)
      } else {
        let list = await this.$post(this.URL.member.iconListConfig, {}).then(res => {
          if (res.code == 0) {
            res.data.forEach(e => {
              // let info = res.data.find(item => item.buyCoinName == e.name);
              e.code = e.buyCoinName.toLowerCase() + e.sellCoinName.toLowerCase();
              e.sellCoinId = e.sellCoinId;
              e.buyCoinId = e.buyCoinId;
              e.name = e.buyCoinName;
              e.changeRate = 0;
              e.closingPriceCny = 0;
              e.color = 0;
              e.icon = e.icon
            })
            let item=res.data[0]
            if(item){
              this.$router.push(`/business/info?id=${item.name}&code=${item.code}&coinid=${item.buyCoinId}&sellCoinId=${item.sellCoinId}`)
            }
          }
        })

      }
    }
  }
};
</script>
<style lang="less" scoped>
.buttomnav {
  position: fixed;
  bottom: 0;
  background: #FFFFFF;
  width: 7.5rem;
  text-align: center;
  z-index: 99;
  padding: 0.2rem 0;
  box-shadow: -0.06rem -0.06rem 0.06rem 0px rgba(88, 59, 38, 0.22);

  .item {
    width: 1.5rem;
  }

  .bet {
    padding: 0 .3rem;
  }

  img {
    height: 0.48rem;
  }

  .xx_str {
    position: absolute;
    height: 0.28rem;
    background: #f53831;
    box-shadow: 0px 0.02rem 0.04rem 0px rgba(245, 56, 49, 0.31);
    line-height: 0.28rem;
    text-align: center;
    padding: 0 0.08rem;
    font-size: 0.2rem;
    border-radius: 0.2rem;
    right: 0.16rem;
    top: -0.1rem;
    color: #fff;
  }

  p {
    font-size: .2rem;
    font-weight: 400;
    color: #909aa5;
  }

  .color {
    color: #713FF5
  }

  .mainIcon{
    width: 1.6rem;
    height: 1.6rem;
    margin-top: -.8rem;
    object-fit: contain;
  }
}
</style>
